<template>
    <div>
        <global-tables @handleAllSelect="handleAllSelect" @changePage="handleChangePage" :list="list" :total="total" :loading="loading" :columns="columns" :current="search.Page">
            <Form :model="search" :label-width="80">
                <div class="table-top-wrap">
                    <div>
                        <div>
                            <Button v-if="isAddBtn" class="features-btn" @click="handleBtnClick(null,'add')">
                                <Icon type="md-add" size="18" />新建
                            </Button>
                            <Button v-if="isDelete" class="features-btn btn-auto-m" @click="handleBtnClick(null,'delete')">
                                <Icon type="md-trash" size="17" />删除
                            </Button>
                        </div>
                    </div>
                    <div class="table-top-wrap-bottom">
                        <div>
                            <input type="text" class="style-input" @keyup.enter="handleSearch" v-model="search.keyword" placeholder="请输入板块名称">
                            <i-input style="display:none"></i-input>
                        </div>
                        <div>
                            <Button icon="ios-search" @click="handleSearch" class="search-btn">搜索</Button>
                        </div>
                    </div>
                </div>
            </Form>
        </global-tables>
        <Modal :mask-closable="false" v-model="isModal" :title="ModalTitle" width="600">
            <div v-if="isModal">
                <Form ref="formItem" :model="formItem" :rules="ruleValidate" :label-width="100">
                    <Row>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="板块名称" prop="ModelName">
                                <i-input v-model="formItem.ModelName" placeholder="请输入板块名称"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="板块标题" prop="ModelTitle">
                                <i-input v-model="formItem.ModelTitle" placeholder="请输入板块标题"></i-input>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="类别" prop="ModelType">
                                <AsyncSelect :theWay="'get'" :url="'Model/TypeList'" :typeOf="'model'" :value="'ModelType'" :currentModel="formItem.ModelType" @setDictionaries="setDictionaries"></AsyncSelect>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 18}">
                            <FormItem label="示例图片">
                                <div class="view-pic">
                                    <img :src="formItem.PictureDemo" alt>
                                </div>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 13}">
                            <FormItem label="显示">
                                <Checkbox v-model="formItem.ShowTitle">显示标题</Checkbox>
                                <Checkbox v-model="formItem.ShowProName">显示名称</Checkbox>
                            </FormItem>
                        </i-col>
                        <i-col :lg="{ span: 20}">
                            <FormItem label="备注" prop="Remark">
                                <i-input type="textarea" v-model="formItem.Remark" placeholder="请输入备注"></i-input>
                            </FormItem>
                        </i-col>
                    </Row>
                </Form>
            </div>
            <div slot="footer">
                <Button size="large" @click="handleClose">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
/**
 * 板块列表
 */
import { cyclicRouting, getdate } from "@/util";
import { getModulePermission } from "@/api/user";
import GlobalTables from "@/components/GlobalTables";
import AsyncSelect from "@/components/AsyncSelect";
import Api from "./service";

export default {
    name: "OnlinePart",
    components: {
        GlobalTables,
        AsyncSelect
    },
    data() {
        const validatorModelType = (rule, value, callback) => {
            setTimeout(() => {
                if (this.formItem.ModelType == "" || !this.formItem.ModelType) {
                    callback(new Error("请选择类别"));
                } else {
                    callback();
                }
            }, 100);
        };
        return {
            list: [],
            total: 0,
            itemId: 0,
            loading: true,
            isAddBtn: false,
            isDelete: false,
            showViewPic: false,
            isDetail: false,
            isEdit: false,
            viewPic: "",
            isModal: false,
            allSelectArr: null,
            ModalTitle: "新建板块",
            formItem: this.initFormItem(),
            search: {
                keyword: "",
                pageindex: 1,
                pagesize: 10
            },
            ruleValidate: {
                ModelType: [
                    {
                        required: true,
                        validator: validatorModelType
                    }
                ],
                ModelName: [
                    {
                        required: true,
                        message: "请输入板块名称",
                        trigger: "change"
                    }
                ],
                ModelTitle: [
                    {
                        required: true,
                        message: "请输入板块标题",
                        trigger: "change"
                    }
                ]
            },
            /* 表头 */
            columns: [
                {
                    type: "selection",
                    width: 60,
                    align: "center"
                },
                {
                    title: "板块名称",
                    key: "ModelName"
                },
                {
                    title: "板块类别",
                    render: (h, params) => {
                        const { ModelType } = params.row;
                        switch (ModelType) {
                            case "1":
                                return h("div", [h("span", {}, "单图展示")]);
                            case "2":
                                return h("div", [h("span", {}, "轮播图")]);
                            case "3":
                                return h("div", [h("span", {}, "多图滑动")]);
                            case "4":
                                return h("div", [h("span", {}, "新闻头条")]);
                            case "5":
                                return h("div", [h("span", {}, "六宫格")]);
                            case "6":
                                return h("div", [h("span", {}, "九宫格")]);
                            case "7":
                                return h("div", [h("span", {}, "左右展示")]);
                        }
                    }
                },
                {
                    title: "板块标题",
                    key: "ModelTitle"
                },
                {
                    title: "显示标题",
                    width: 100,
                    render: (h, params) => {
                        const { ShowTitle } = params.row;
                        if (ShowTitle) {
                            return h("div", [
                                h("Icon", {
                                    props: {
                                        type: "ios-checkmark-circle-outline",
                                        color: "#1abc9c",
                                        size: "18"
                                    }
                                })
                            ]);
                        } else {
                            return h("div", [
                                h("Icon", {
                                    props: {
                                        type: "ios-close-circle-outline",
                                        color: "red",
                                        size: "18"
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: "显示名称",
                    width: 100,
                    render: (h, params) => {
                        const { ShowProName } = params.row;
                        if (ShowProName) {
                            return h("div", [
                                h("Icon", {
                                    props: {
                                        type: "ios-checkmark-circle-outline",
                                        color: "#1abc9c",
                                        size: "18"
                                    }
                                })
                            ]);
                        } else {
                            return h("div", [
                                h("Icon", {
                                    props: {
                                        type: "ios-close-circle-outline",
                                        color: "red",
                                        size: "18"
                                    }
                                })
                            ]);
                        }
                    }
                },
                {
                    title: "备注",
                    key: "Remark"
                },
                {
                    title: "最后维护人",
                    key: "Modifier"
                },
                {
                    title: "最后维护时间",
                    render: (h, params) => {
                        return h("div", [
                            params.row.LastModifyTime &&
                                h(
                                    "span",
                                    {
                                        props: {
                                            type: "primary",
                                            size: "small"
                                        }
                                    },
                                    getdate(
                                        new Date(
                                            params.row.LastModifyTime
                                        ).getTime()
                                    )
                                )
                        ]);
                    }
                },
                {
                    title: "操作",
                    width: 130,
                    align: "center",
                    render: (h, params) => {
                        const { isEdit, isDetail } = this;
                        return h("div", [
                            isEdit &&
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "info",
                                            size: "small"
                                        },
                                        style: {
                                            border: "none",
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(
                                                    params.row,
                                                    "edit"
                                                );
                                            }
                                        }
                                    },
                                    "修改"
                                ),
                            isDetail &&
                                h(
                                    "Button",
                                    {
                                        props: {
                                            type: "success",
                                            size: "small"
                                        },
                                        style: {
                                            border: "none",
                                            marginRight: "5px"
                                        },
                                        on: {
                                            click: () => {
                                                this.handleBtnClick(
                                                    params.row,
                                                    "detail"
                                                );
                                            }
                                        }
                                    },
                                    "明细"
                                )
                        ]);
                    }
                }
            ]
        };
    },
    methods: {
        /* 关闭对话框 */
        handleClose() {
            this.isModal = false;
        },
        /* 板块选择 */
        setDictionaries(item, value) {
            this.formItem[value] = item.ID + "";
            this.formItem.PictureDemo = item.PictureUrl;
        },
        /* 提交 */
        handleSubmit(name) {
            this.$refs[name].validate(valid => {
                if (valid) {
                    let data = this.formItem;
                    data.ID = this.itemId;
                    Api.addTablesItem(data).then(res => {
                        if (res.state == "success") {
                            this.$Message.success("操作成功");
                            this.loading = true;
                            this.isModal = false;
                            this.getTablesListData();
                        } else {
                            this.$Message.error(res.message);
                        }
                    });
                }
            });
        },
        /* 表格数据请求 */
        getTablesListData() {
            const data = this.search;
            Api.getTablesList(data).then(res => {
                this.list = res.data.rows;
                this.loading = false;
                this.total = res.data.records;
            });
        },
        /* 表格查询 */
        handleSearch() {
            this.loading = true;
            this.getTablesListData();
        },
        /* 对话框 */
        handleBtnClick(item, type) {
            this.ModalTitle = "新建板块";
            this.formItem = this.initFormItem();
            this.itemId = 0;
            if (type == "edit" || type == "add") {
                if (type == "edit") {
                    this.itemId = item.ID;
                    this.ModalTitle = "修改板块";
                    this.itemId = item.ID;
                    Api.getItemInfo({
                        id: item.ID
                    }).then(res => {
                        this.isModal = true;
                        this.formItem = {
                            ...res.data
                        };
                    });
                } else {
                    this.isModal = true;
                }
            } else if (type == "detail") {
                this.itemId = item.ID;
                this.$router.push({
                    path: `/online-part-detail/${this.itemId}`
                });
            } else if (type === "delete") {
                if (this.allSelectArr) {
                    this.$Modal.confirm({
                        title: `你确定要删除吗`,
                        onOk: () => {
                            Api.deleteItem({
                                ids: this.allSelectArr
                            }).then(res => {
                                if (res.state == "success") {
                                    this.$Message.success(res.message);
                                    this.allSelectArr = "";
                                } else {
                                    this.$Message.error(res.message);
                                }
                                this.getTablesListData();
                            });
                        },
                        onCancel: () => {
                            this.$Message.info("取消成功");
                        }
                    });
                } else {
                    this.$Message.error("请先选择需要操作的记录");
                }
            }
        },
        /* 表单数据 */
        initFormItem() {
            return {
                ModelName: "",
                ModelTitle: "",
                ModelType: "",
                PictureDemo: "",
                Remark: "",
                ShowProName: true,
                ShowTitle: true
            };
        },
        /* 表格分页方法 */
        handleChangePage(type, page) {
            this.loading = true;
            if (type == "page") {
                this.search.pageindex = page;
                this.getTablesListData();
            } else {
                this.search.pagesizeize = page;
                this.getTablesListData();
            }
        },
        /* 复选框选中 */
        handleAllSelect(list) {
            let arr = [];
            for (let item in list) {
                arr.push(list[item].ID);
                arr.join(",");
            }
            arr = arr.join(",");
            this.allSelectArr = arr;
        }
    },
    mounted() {
        /* 获取菜单的id */
        cyclicRouting(
            JSON.parse(sessionStorage.getItem("user")).menuList,
            this.$route,
            id => {
                /* 按钮权限请求 */
                getModulePermission({
                    roleid: JSON.parse(sessionStorage.getItem("user")).roleid,
                    moduleid: id
                }).then(res => {
                    /* 按钮权限赋值 */
                    for (let item in res.data) {
                        if (res.data[item].name == "add") {
                            this.isAddBtn = true;
                        } else if (res.data[item].name == "edit") {
                            this.isEdit = true;
                        } else if (res.data[item].name == "detail") {
                            this.isDetail = true;
                        } else if (res.data[item].name == "delete") {
                            this.isDelete = true;
                        }
                    }
                    /* 列表请求 */
                    this.getTablesListData();
                });
            }
        );
    }
};
</script>

<style lang="less" scoped>
.view-pic {
    border: 1px solid #dcdee2;
    padding: 5px;
    border-radius: 5px;
    img {
        width: 100%;
    }
}
</style>

